<template>
   <div>
     <div class="flex">
        <div class="flex-box">
            <div class="image">
            <img :src="img" alt="">
        </div>
        <div>
            <h3 :style={color}>
                <span>￥</span>{{ pirce }}
            </h3>
            <p>
                {{ title }}
            </p>
        </div>
        </div>
        <div class="copy"></div>
        <div class="increase">
            日同比<span :style={color}>增高20%<img src="../../src/img/上升.png" alt=""/>
            </span>
            
        </div>
     </div>
   </div>
</template>

<script>
import { toRefs } from 'vue'
export default {
    props:['img','pirce','title','color'],
  setup(props){
   return {
    ...toRefs(props)
   }
  }
}
</script>

<style lang="scss" scoped>
.image img{
    width: 60px;
	height: 60px;
}
.flex{
    width: 400px;
	height: 150px;
	background-color: #ffffff;
	box-shadow: 0px 0px 10px 0px 
		rgba(51, 51, 51, 0.1);
	border-radius: 8px;
    margin-top: 13px;
}
.flex-box{
    display: flex;
    justify-content: space-between;
    padding:10px;
    h3{
       margin-left: 25px;
       line-height: 30px;
    }
}
.increase{
    width: 100%;
	height: 14px;
	font-size: 12px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #303849;
    margin-left: 20px;
    display: flex;
    span{
        display: flex;
    }
}
.copy{
    margin-left: 20px;
    margin-bottom: 15px;
    width: 350px;
	height: 1px;
	background-color: rgba(178, 183, 198, 0.5);
	border-radius: 1px;
}
</style>

